<template>
    <el-button type="success" @click="handleAddClick">添加</el-button>
      <el-button  @click="loadData"><el-icon><Refresh /></el-icon></el-button>
     <!-- <div>底部导航：{{state.bottom_group}}</div>  -->
      <el-divider />
  
     <el-table
      :data="state.lists"
      style="width: 1260px"
      :row-class-name="tableRowClassName"
    >
    <el-table-column  prop="id" label="ID"/>
    <el-table-column  prop="title" label="配置名"/>
    <el-table-column  prop="name" label="配置参数"/>
    <el-table-column  prop="value" label="配置值">
        <template #default="scope">
            <el-image v-if="scope.row.type == 'file'" :src="scope.row.value" :fit="fit"/>
        </template>
        </el-table-column>
    <el-table-column  prop="items" label="配置项"/>
    <el-table-column fixed="right" label="操作" width="180">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="handleEditClick(scope.row,scope.$index)"
            >简单编辑</el-button>
            <el-button link type="primary" size="small" @click="handleEditItemClick(scope.row,scope.$index)"
            >编辑配置</el-button>
          <el-button link type="danger" size="small" @click="handleDelClick(scope.row,scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  
    <!-- 添加分类 -->
    <el-dialog v-model="visible" :show-close="false">
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header">
          <h4 :id="titleId" :class="titleClass">添加配置!</h4>
          
        </div>
      </template>
      <el-form 
          ref="ruleRef" 
          :model="state.form"
          :rules="rules" 
          status-icon 
          class="demo-ruleForm" 
          label-width="120px"
          >
          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="普通表单元素" name="input">
                    <el-form 
                        ref="ruleRef" 
                        :model="state.elinput"
                        :rules="rules" 
                        status-icon 
                        class="demo-ruleForm" 
                        label-width="120px"
                        >
                        <el-form-item label="配置名称" prop="title">
                            <el-input placeholder="请输入配置的名称" v-model="state.elinput.title" />
                        </el-form-item>    
                        <el-form-item label="字段变量" prop="name">
                            <el-input placeholder="请输入字段变量（英文）" v-model="state.elinput.name" />
                        </el-form-item>  
                        <el-form-item label="配置值" prop="value">
                            <el-input placeholder="请输入配置值" v-model="state.elinput.value" />
                        </el-form-item>  
                        <el-form-item label="提示" prop="tip">
                            <el-input type="textarea" placeholder="请输入提示" v-model="state.elinput.tip" />
                        </el-form-item>      
                    </el-form>

                </el-tab-pane>
                <el-tab-pane label="文件上传" name="file">

                    <el-form 
                        ref="ruleRef" 
                        :model="state.elfile"
                        :rules="rules" 
                        status-icon 
                        class="demo-ruleForm" 
                        label-width="120px"
                        >
                        <el-form-item label="配置名称" prop="title">
                            <el-input placeholder="请输入配置的名称" v-model="state.elfile.title" />
                        </el-form-item>    
                        <el-form-item label="字段变量" prop="name">
                            <el-input placeholder="请输入字段变量（英文）" v-model="state.elfile.name" />
                        </el-form-item>  
                        <el-form-item label="配置值" prop="value">
                           <ImageUpload  ref="fileType" :imgUrl="state.elfile.value"/>
                        </el-form-item>  
                        <el-form-item label="提示" prop="tip">
                            <el-input type="textarea" placeholder="请输入提示" v-model="state.elfile.tip" />
                        </el-form-item>  
                    </el-form>
      

                </el-tab-pane>
                <el-tab-pane label="单选" name="radio">
                    <el-form 
                        ref="ruleRef" 
                        :model="state.elradio"
                        :rules="rules" 
                        status-icon 
                        class="demo-ruleForm" 
                        label-width="120px"
                        >
                        <el-form-item label="配置名称" prop="title">
                            <el-input placeholder="请输入配置的名称" v-model="state.elradio.title" />
                        </el-form-item>    
                        <el-form-item label="字段变量" prop="name">
                            <el-input placeholder="请输入字段变量（英文）" v-model="state.elradio.name" />
                        </el-form-item>  
                        <el-form-item label="配置值" prop="value">
                            <el-input placeholder="请输入配置值" v-model="state.elradio.value" />
                        </el-form-item>  
                        <el-form-item label="配置项" prop="items">
                            <el-input  type="textarea" placeholder="请输入配置项 json格式。例：[{label:?;name:?}]" v-model="state.elradio.items" />
                        </el-form-item>  
                        <el-form-item label="提示" prop="tip">
                            <el-input type="textarea" placeholder="请输入提示" v-model="state.elradio.tip" />
                        </el-form-item>     
                    </el-form>


                </el-tab-pane>
                <el-tab-pane label="多选" name="checkbox">

                    <el-form 
                        ref="ruleRef" 
                        :model="state.elcheckbox"
                        :rules="rules" 
                        status-icon 
                        class="demo-ruleForm" 
                        label-width="120px"
                        >
                        <el-form-item label="配置名称" prop="title">
                            <el-input placeholder="请输入配置的名称" v-model="state.elcheckbox.title" />
                        </el-form-item>    
                        <el-form-item label="字段变量" prop="name">
                            <el-input placeholder="请输入字段变量（英文）" v-model="state.elcheckbox.name" />
                        </el-form-item>  
                        <el-form-item label="配置值" prop="value">
                            <el-input placeholder="请输入配置值" v-model="state.elcheckbox.value" />
                        </el-form-item>  
                        <el-form-item label="配置项" prop="items">
                            <el-input  type="textarea" placeholder="请输入配置项。json格式。例：[{label:?;name:?}]" v-model="state.elcheckbox.items" />
                        </el-form-item> 
                        <el-form-item label="提示" prop="tip">
                            <el-input type="textarea" placeholder="请输入提示" v-model="state.elcheckbox.tip" />
                        </el-form-item>     
                    </el-form>

                </el-tab-pane>
                <el-tab-pane label="下拉" name="select">

                    <el-form 
                        ref="ruleRef" 
                        :model="state.elselect"
                        :rules="rules" 
                        status-icon 
                        class="demo-ruleForm" 
                        label-width="120px"
                        >
                       <el-form-item label="配置名称" prop="title">
                            <el-input placeholder="请输入配置的名称" v-model="state.elselect.title" />
                        </el-form-item>    
                        <el-form-item label="字段变量" prop="name">
                            <el-input placeholder="请输入字段变量（英文）" v-model="state.elselect.name" />
                        </el-form-item>  

                        <el-form-item label="配置值" prop="value">
                            <el-input placeholder="请输入配置值" v-model="state.elselect.value" />
                        </el-form-item>  
                        <el-form-item label="配置项" prop="items">
                            <el-input type="textarea" placeholder="请输入配置项 json格式。例：[{label:?;name:?}]" v-model="state.elselect.items" />
                        </el-form-item> 
                        <el-form-item label="提示" prop="tip">
                            <el-input type="textarea" placeholder="请输入提示" v-model="state.elselect.tip" />
                        </el-form-item>  
                    </el-form> 

                </el-tab-pane>
           </el-tabs>
          </el-form>
         <el-form-item>
          <el-button type="primary" @click="onSubmit(ruleRef)">添加</el-button>
          <el-button type="danger" @click="visible = false">
            <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
            关闭
          </el-button>
        </el-form-item>
    </el-dialog>
      <!-- 编辑分类 -->
      <el-dialog v-model="edit_visible" :show-close="false">
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header">
          <h4 :id="titleId" :class="titleClass">编辑配置!</h4>
          
        </div>
      </template>
        <el-form 
          :model="state.edit_form"
          label-width="120px"
          >
          {{state.edit_form}}
            <el-form-item label="配置名称" prop="title">
                    <el-input placeholder="请输入配置的名称" v-model="state.edit_form.title" />
            </el-form-item>    
            <el-form-item label="字段变量" prop="name">
                    <el-input placeholder="请输入字段变量（英文）" v-model="state.edit_form.name" />
            </el-form-item>  
            <el-form-item label="配置值" prop="value">
                    <div v-if="state.edit_form.type == 'input'">
                        <el-input placeholder="请输入配置值" v-model="state.edit_form.value" />
                    </div>
                    <div v-if="state.edit_form.type == 'file'">
                        <ImageUpload ref="editImage" :imageUrl="state.edit_form.value" />
                    </div>
                    <div v-if="state.edit_form.type == 'radio'">
                        <el-radio-group v-model="state.edit_form.value" class="ml-4">
                            <el-radio v-for="(item,index) in state.edit_form.items" :label="item.value" size="large">{{item.label}}</el-radio>
                        </el-radio-group>
                    </div>
                    <div v-if="state.edit_form.type == 'checkbox'">
                        <el-checkbox-group v-model="state.edit_form.value">
                            <el-checkbox v-for="(item,index) in state.edit_form.items"  :label="item.value" size="large" >{{item.label}}</el-checkbox>
                        </el-checkbox-group>
                    </div>
                    <div v-if="state.edit_form.type == 'select'">
                        <el-select v-model="state.edit_form.value" class="m-2" placeholder="Select" size="large">
                            <el-option
                            v-for="item in state.edit_form.items"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            />
                        </el-select>
                       
                    </div>
                </el-form-item>  
            <el-form-item label="提示" prop="tip">
                    <el-input type="textarea" placeholder="提示" v-model="state.edit_form.tip" />
            </el-form-item>  
          </el-form>
         <el-form-item>
          <el-button type="primary" @click="onSave(ruleRef)">更新</el-button>
          <el-button type="danger" @click="edit_visible = false">
            <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
            关闭
          </el-button>
        </el-form-item>
    </el-dialog>
 <!-- 编辑配置 -->
 <el-dialog v-model="deep_visible" :show-close="false">
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header">
          <h4 :id="titleId" :class="titleClass">深度编辑配置!</h4>
          
        </div>
      </template>
      <el-form 
          ref="ruleRef" 
          :model="state.deep_form"
          :rules="rules" 
          status-icon 
          class="demo-ruleForm" 
          label-width="120px"
          >
          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="普通表单元素" name="input">
                    <el-form 
                        ref="ruleRef" 
                        :model="state.elinput"
                        :rules="rules" 
                        status-icon 
                        class="demo-ruleForm" 
                        label-width="120px"
                        >
                        <el-form-item label="配置名称" prop="title">
                            <el-input placeholder="请输入配置的名称" v-model="state.elinput.title" />
                        </el-form-item>    
                        <el-form-item label="字段变量" prop="name">
                            <el-input placeholder="请输入字段变量（英文）" v-model="state.elinput.name" />
                        </el-form-item>  
                        <el-form-item label="配置值" prop="value">
                            <el-input placeholder="请输入配置值" v-model="state.elinput.value" />
                        </el-form-item>  
                        <el-form-item label="提示" prop="tip">
                            <el-input type="textarea" placeholder="请输入提示" v-model="state.elinput.tip" />
                        </el-form-item>      
                    </el-form>

                </el-tab-pane>
                <el-tab-pane label="文件上传" name="file">

                    <el-form 
                        ref="ruleRef" 
                        :model="state.elfile"
                        :rules="rules" 
                        status-icon 
                        class="demo-ruleForm" 
                        label-width="120px"
                        >
                        <el-form-item label="配置名称" prop="title">
                            <el-input placeholder="请输入配置的名称" v-model="state.elfile.title" />
                        </el-form-item>    
                        <el-form-item label="字段变量" prop="key">
                            <el-input placeholder="请输入字段变量（英文）" v-model="state.elfile.key" />
                        </el-form-item>  
                        <el-form-item label="配置值" prop="value">
                           <ImageUpload  ref="fileType" :imgUrl="state.elfile.value"/>
                        </el-form-item>  
                        <el-form-item label="提示" prop="tip">
                            <el-input type="textarea" placeholder="请输入提示" v-model="state.elfile.tip" />
                        </el-form-item>  
                    </el-form>
      

                </el-tab-pane>
                <el-tab-pane label="单选" name="radio">
                    <el-form 
                        ref="ruleRef" 
                        :model="state.elradio"
                        :rules="rules" 
                        status-icon 
                        class="demo-ruleForm" 
                        label-width="120px"
                        >
                        <el-form-item label="配置名称" prop="title">
                            <el-input placeholder="请输入配置的名称" v-model="state.elradio.title" />
                        </el-form-item>    
                        <el-form-item label="字段变量" prop="key">
                            <el-input placeholder="请输入字段变量（英文）" v-model="state.elradio.key" />
                        </el-form-item>  
                        <el-form-item label="配置值" prop="value">
                            <el-input placeholder="请输入配置值" v-model="state.elradio.value" />
                        </el-form-item>  
                        <el-form-item label="配置项" prop="items">
                            <el-input  type="textarea" placeholder="请输入配置项 json格式。例：[{label:?;name:?}]" v-model="state.elradio.items" />
                        </el-form-item>  
                        <el-form-item label="提示" prop="tip">
                            <el-input type="textarea" placeholder="请输入提示" v-model="state.elradio.tip" />
                        </el-form-item>     
                    </el-form>


                </el-tab-pane>
                <el-tab-pane label="多选" name="checkbox">

                    <el-form 
                        ref="ruleRef" 
                        :model="state.elcheckbox"
                        :rules="rules" 
                        status-icon 
                        class="demo-ruleForm" 
                        label-width="120px"
                        >
                        <el-form-item label="配置名称" prop="title">
                            <el-input placeholder="请输入配置的名称" v-model="state.elcheckbox.title" />
                        </el-form-item>    
                        <el-form-item label="字段变量" prop="key">
                            <el-input placeholder="请输入字段变量（英文）" v-model="state.elcheckbox.key" />
                        </el-form-item>  
                        <el-form-item label="配置值" prop="value">
                            <el-input placeholder="请输入配置值" v-model="state.elcheckbox.value" />
                        </el-form-item>  
                        <el-form-item label="配置项" prop="items">
                            <el-input  type="textarea" placeholder="请输入配置项。json格式。例：[{label:?;name:?}]" v-model="state.elcheckbox.items" />
                        </el-form-item> 
                        <el-form-item label="提示" prop="tip">
                            <el-input type="textarea" placeholder="请输入提示" v-model="state.elcheckbox.tip" />
                        </el-form-item>     
                    </el-form>

                </el-tab-pane>
                <el-tab-pane label="下拉" name="select">

                    <el-form 
                        ref="ruleRef" 
                        :model="state.elselect"
                        :rules="rules" 
                        status-icon 
                        class="demo-ruleForm" 
                        label-width="120px"
                        >
                       <el-form-item label="配置名称" prop="title">
                            <el-input placeholder="请输入配置的名称" v-model="state.elselect.title" />
                        </el-form-item>    
                        <el-form-item label="字段变量" prop="key">
                            <el-input placeholder="请输入字段变量（英文）" v-model="state.elselect.key" />
                        </el-form-item>  

                        <el-form-item label="配置值" prop="value">
                            <el-input placeholder="请输入配置值" v-model="state.elselect.value" />
                        </el-form-item>  
                        <el-form-item label="配置项" prop="items">
                            <el-input type="textarea" placeholder="请输入配置项 json格式。例：[{label:?;name:?}]" v-model="state.elselect.items" />
                        </el-form-item> 
                        <el-form-item label="提示" prop="tip">
                            <el-input type="textarea" placeholder="请输入提示" v-model="state.elselect.tip" />
                        </el-form-item>  
                    </el-form> 

                </el-tab-pane>
           </el-tabs>
          </el-form>
         <el-form-item>
          <el-button type="primary" @click="onDeepSave(ruleRef)">更新</el-button>
          <el-button type="danger" @click="deep_visible = false">
            <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
            关闭
          </el-button>
        </el-form-item>
    </el-dialog>
  </template>
  
  <script setup>
  
  import {ref,reactive,onMounted} from 'vue';
  import {useRoute} from 'vue-router';
  import {CircleCloseFilled,Refresh} from '@element-plus/icons-vue';
  import {index,create,del,edit,deepEdit} from '../../api/config.js';
  import ImageUpload from '../../components/ImageUpload.vue';

  const state = reactive({
      lists:[],
      bottom_group:[],
      articles:[],
      edit_form_items:{},
      total:0,
      form:{},
      edit_form:{},
      deep_form:{},
      elinput:{
        type:'input',
      },
      elradio:{
        type:'radio'
      },
      elcheckbox:{
        type:'checkbox'
      },
      elfile:{
        type:'file'
      },
      elselect:{
        type:'select'
      }
  });
  const activeName =ref('input');
  const visible = ref(false);
  const edit_visible = ref(false);
  const ruleRef = ref();
  const fileType = ref(null);
  const editImage = ref(null);
  const rules=[];
  const route = useRoute();
  const deep_visible = ref(false);
  onMounted(()=>{
    loadData();
  })
  const loadData = ()=>{
    let search = {};
        search.group_id = route.query.group_id;
    index(search).then(res=>{
        if(res.code == 200) {
          state.lists = res.data.data;
          state.total = res.data.total;
        }
    })
  }
  const handleClick=(tab,event) =>{
        console.log(tab);
  }
  const handleEditItemClick=(item,index)=>{
    deep_visible.value = true;
    state.deep_form = item;
    if(item.type == "file") {
        state.activeName = 'file';
        state.elfile = item;
    }else if(item.type == "input") {
        state.activeName = 'input';
        state.elinput = item;
    }else if(item.type == "radio") {
        state.activeName = 'radio';
        state.elradio = item;
    }else if(item.type == "checkbox") {
        state.activeName = 'checkbox';
        state.elcheckbox = item;
    }else if(item.type == "select") {
        state.activeName = 'select';
        state.elselect = item;
    }
  }
  const onFcategoryChange = ()=>{

  }
  const handleAddClick=()=>{
        visible.value = true;
  }
  const handleEditClick=(item,index)=>{
        let temp = JSON.parse(JSON.stringify(item));
        edit_visible.value = true;
        state.edit_form = temp;
        state.edit_form.items = typeof(temp.items) == 'string'  ?  JSON.parse(temp.items) : temp.items;
        if(state.edit_form.type == 'checkbox') {
            state.edit_form.value = temp.value.split(',')
        }
  }
  
  const handleDelClick=(item,index)=>{
        ElMessageBox.confirm("确定删除吗?","删除提示?").then(res=>{
          del({id:item.id}).then(()=>{
            if(res.code == 200) {
              ElMessage({
                message:"删除成功",
                type:"success"
              });
            }
            state.lists.splice(index,1);
          })
           
        })
  }
  const getConfigureByType =()=>{
        let type = activeName.value;
            if(type == 'input'){
                return state.elinput; 
            } else if(type == "file"){
                return state.elfile;
            }  else if(type == "radio"){
                return state.elradio;
            } else if( type == "checkbox"){
                return state.elcheckbox;
            } else if(type == "select") {
                return state.elselect;
            }
  }

  const onSubmit = ()=>{
      let configures = getConfigureByType();
          configures.group_id = route.query.group_id;

          if(configures.type == 'file') {
            configures.value = fileType.value.image;
          }
      create(configures).then(res=>{
        if(res.code == 200) {
          ElMessage({
            message:"添加成功",
            type:"success"
          });
          loadData()
        } else {
          ElMessage({
            message:res.message,
            type:"warning"
          });
        }
      })
  }

  const onDeepSave =()=>{
    let configures = getConfigureByType();
          configures.group_id = route.query.group_id;
          configures.id = state.deep_form.id;
          if(configures.type == 'file') {
             configures.value = fileType.value.image;
             configures.items = {};
          } 
          if(configures.type == 'input') {
            configures.items = {};
          }
      deepEdit(configures).then(res=>{
        if(res.code == 200) {
          ElMessage({
            message:"添加成功",
            type:"success"
          });
          loadData()
        } else {
          ElMessage({
            message:res.message,
            type:"warning"
          });
        }
      })
  }
  const onSave = ()=>{
    if(state.edit_form.type == 'file') {
        state.edit_form.value = editImage.value.image;
    }
    edit(state.edit_form).then(res=>{
        if(res.code == 200) {
          ElMessage({
            message:"更新成功",
            type:"success"
          });
        } else {
          ElMessage({
            message:res.message,
            type:"warning"
          });
        }
      })
  }
  </script>
  
  <style>
  
  </style>